<template>
  <view-box body-padding-bottom="55px" class="container">
    <div class="personal-head">
      <img :src="avatar ? avatar : '/static/thumb-small.png'" alt="">
      <div class="p-head-info">
        <p class="p-nickname">
          <template v-if="userInfo"> 
            {{userInfo.name}} <!-- <i class="iconfont icon-yijianfankui1"></i> -->
            <div>
            {{userInfo.level.name}}；ID：{{userInfo.id}}
              <div class="signin">
                <x-button :show-loadong="signining" :disabled="signining" @click.native="signin()" mini :gradients="['#FF5E3A', '#FF9500']">
                  <i class="iconfont icon-qiandao"></i> 签到</x-button>
              </div>
            </div>
          </template>
          <template v-else @click="$router.push('/login')">点击登陆</template>
        </p>
      </div>
    </div>
    <grid class="grid" :cols="5" style="margin-top:10px;">
      <grid-item class="all" style="color:#fc6506;" label="全部" link="/orders?type=0">
        <i slot="icon" class="iconfont icon-quanbu"></i>
        <div class="triangle"></div>
      </grid-item>
      <grid-item style="color:#fc6506;" label="待付款" link="/orders?type=1">
        <i slot="icon" class="iconfont icon-dfk"></i>
      </grid-item>
      <grid-item style="color:#fc6506;" label="待发货" link="/orders?type=2">
        <i slot="icon" class="iconfont icon-daishouhuo"></i>
      </grid-item>
      <grid-item style="color:#fc6506;" label="待收货" link="/orders?type=3">
        <i slot="icon" class="iconfont icon-daishouhuo1"></i>
      </grid-item>
      <grid-item style="color:#fc6506;" label="已完成" link="/orders?type=4">
        <i slot="icon" class="iconfont icon-daipingjia"></i>
      </grid-item>
    </grid>

    <grid class="grid" style="margin-top:5px;">
      <grid-item style="color:#fc6506;" label="会员升级" link="/level">
        <i slot="icon" class="iconfont icon-huiyuanshengjiguanhuai"></i>
      </grid-item>
      <grid-item style="color:#fd5046;" label="我的收藏" link="/collections">
        <i slot="icon" class="iconfont icon-wodeshoucang"></i>
      </grid-item>
      <grid-item style="color:#1ecd16;" label="爱心众筹" link="/donation">
        <i slot="icon" class="iconfont icon-zhongchou"></i>
      </grid-item>
      <grid-item style="color:#ffc93e;" label="购物车" link="/carts">
        <i slot="icon" class="iconfont icon-gouwuche2"></i>
      </grid-item>
    </grid>
    <group class="personal-list clear-margin">
      <cell link="/messages">
        <p slot="title" style="font-size:16px;"><i class="iconfont icon-xiaoxi"></i>未读消息 <badge :text="$store.getters.unreadMessage + ''"></badge></p>
      </cell>
      <cell-box :link="'/share?type=1&from=' + this.userInfo.id" v-if="userInfo">
        <p><i class="iconfont icon-fenxiang1"></i>我要分享</p>
      </cell-box>
      <cell-box :link="'/share?type=2&from=' + this.userInfo.id" v-if="isTeacher">
        <p><i class="iconfont icon-card"></i>我的名片</p>
      </cell-box>
      <cell-box link="/group">
        <p><i class="iconfont icon-guanyuwomen"></i>我的团队</p>
      </cell-box>
       <cell-box link="/balances">
        <p><i class="iconfont icon-zhanghuyue"></i>我的奖学金</p>
      </cell-box>
      <cell-box link="/integrals">
        <p><i class="iconfont icon-jifen"></i>成长值</p>
      </cell-box>
      <cell-box link="/addresses">
        <p><i class="iconfont icon-scdizhi"></i>收货地址</p>
      </cell-box>
      <cell-box link="/posts/5">
        <p><i class="iconfont icon-jiankangshuai"></i>使用帮助</p>
      </cell-box>
       <cell-box  link="/posts/8">
        <p><i class="iconfont icon-guanyuwomen1"></i>关于我们</p>
      </cell-box>
      <cell-box  link="/contact_us">
        <p><i class="iconfont icon-lianxi1"></i>联系我们</p>
      </cell-box>
      <cell-box  link="/fadeback">
        <p><i class="iconfont icon-yijianfankui1"></i>意见反馈</p>
      </cell-box>
    </group>
    <!-- <div class="logout">退出登陆</div> -->
    <footer-bar slot="bottom" selected="user"></footer-bar>
  </view-box>
</template>
<script>
  import { Grid, GridItem, Group, CellBox, Cell, XButton, ViewBox, XDialog, TransferDomDirective as TransferDom, Badge } from 'vux'
  import FooterBar from '../components/FooterBar'
  export default {
    data () {
      return {
        signining: false
      }
    },
    directives: {
      TransferDom
    },
    name: 'user',
    components: {
      Grid,
      GridItem,
      Group,
      CellBox,
      Cell,
      XButton,
      ViewBox,
      FooterBar,
      XDialog,
      Badge
    },
    mounted () {
      if (!this.$store.state.auth.userInfo) {
        this.$store.dispatch('getUserInfo')
      }
    },
    computed: {
      userInfo () {
        return this.$store.getters.userInfo
      },
      isTeacher () {
        if (!this.userInfo) {
          return false
        }
        return this.userInfo.roles.some((item) => {
          return item === 'Teacher'
        })
      },
      avatar () {
        if (!this.userInfo) {
          return null
        }
        if (this.userInfo.avatar.indexOf('http:') === -1) {
          return this.$apiUrl + '/storage/' + this.userInfo.avatar
        }
        return this.userInfo.avatar
      }
    },
    methods: {
      signin () {
        this.signining = true
        this.$http.post('/signins').then((response) => {
          this.signining = false
          this.$store.dispatch('getUserInfo')
          this.$vux.alert.show({
            title: '恭喜您',
            content: '签到成功，获得5成长值'
          })
        }).catch((error) => {
          console.log(error)
          this.signining = false
        })
      }
    }
  }
</script>
<style scoped lang="less">
  .container {
    background-color: #f2f2f2;
  }
  .personal-head {
    padding-top: 35px;
    width: 100%;
    background: url('./images/user_bg.jpg');
    background-size: 100%;
    display: flex;
  }
  .personal-head img {
    border: 1px solid hsla(0,0%,100%,.5);
    border-radius: 100%;
    height: 64px;
    width: 64px;
    vertical-align: middle;
    margin-right: 20px;
    margin-left: 30px;
  }
  .personal-head .p-head-info {
    padding-top: 8px;
    flex-grow: 1;
    color: #fff;
    div {
      font-size: 12px;
      color: #C8C8CD;
    }
  }
  .personal-head .signin {
    float: right;
    line-height: 64px;
    margin-right: 15px;
  }
  .personal-head .p-head-info .i {
    display: inline-block;
    color: #fff;
  }
  .grid {
    background-color: #fff;
  }
  .grid .weui-grid {
    color: #999;
  }
  .grid .weui-grid:after {
    border: none;
  }
  .grid .weui-grid:before {
    border: none;
  }
  .grid i{
    font-size: 25px;
    line-height: 25px;
  }
  .weui-grid {
    padding: 10px;
  }
  .personal-list i.iconfont {
    color: #999;
    font-size: 18px;
    padding-right: 6px;
  }
  .clear-margin {
    margin-top: -15px;
  }
  .logout {
    text-align: center;
    width: 100%;
    background-color: #fff;
    margin-top: 10px;
    height: 40px;
    line-height: 40px;
  }
  .qrcode {
    padding: 5px 5px 0 5px;
    background-color: #fff;
  }
  .all {
    border-right: 1px solid #D9D9D9;
    position: relative;
  }
  .all .triangle {
    width: 10px;
    height: 10px;
    background: #FFF;
    border-top: 1px solid #D9D9D9;
    border-left: 1px solid #D9D9D9;
    position: absolute;
    top: 32px;
    right: -5px;
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
  }
</style>